<template>
  <el-dialog title="运费设置" v-model="designatedAreDialogShow" width="600" :before-close="handleClose"
    :close-on-click-modal="false" :close-on-press-escape="false">
    <div>
      <AreaMultipleGroup v-model="areaData" :prevAreaData="prevAreaData" />
      <FormTitle titleName="添加价格" style="margin-bottom: 16px;"></FormTitle>
      <el-form ref="formRef" :model="form" label-width="auto">
        <el-row>
          <el-col :span="12">
            <el-form-item :label="`首件数(${unit})`" prop="firstPieces" :rules="getRules('input', '')">
              <el-input class="w160" v-model="form.firstPieces" @input="()=>{form.firstPieces=limitInt(form.firstPieces)}" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="`首费(元)`" prop="firsCharge" :rules="getRules('input', '')">
              <el-input class="w160" v-model="form.firsCharge" @input="()=>{form.firsCharge=limitFloat(form.firsCharge)}" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="`续件数(${unit})`" prop="firstPieces" :rules="getRules('input', '')">
              <el-input class="w160" v-model="form.continuations" @input="()=>{form.continuations=limitInt(form.continuations)}" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="`续费(元)`" prop="renew" :rules="getRules('input', '')">
              <el-input class="w160" v-model="form.renew" @input="()=>{form.renew=limitFloat(form.renew)}" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="confirm">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { useFreightAction } from '../Hooks/freightAction';
import {useAreaGroup} from '../Hooks/freightAction'
import AreaMultipleGroup from './AreaMultipleGroup.vue'
import getRules from '@/validUtils';
import { limitFloat,limitInt } from '@/utils/common.js'
const props = defineProps({
  unit: {
    type: String,
    default: '件',
  },
})
const {
  designatedArea,
  itemDesignatedArea,
  designatedAreDialogShow,
  isEditFreight } = useFreightAction()
const {province} = useAreaGroup()

// 已选中的全部地区
const prevAreaData = computed(() => {
  return designatedArea.value.map(item => {
    return item.destination.split('，')
  }).flat(1)
})
const areaData = ref([])
const formRef = ref(null)
const form = ref({
  firstPieces: null,
  firsCharge: null,
  continuations: null,
  renew: null,
})
watch(itemDesignatedArea,(newVal)=>{
  if(isEditFreight.value){
    form.value = {
      ...newVal
    }
    console.log('newVal', newVal)
    const arr = province.filter(item =>newVal.destination.split('，').includes(item.area_name)) 
    console.log('arr', arr)
    areaData.value = arr
  }
})

const handleClose = () => {
  designatedAreDialogShow.value = false
  formRef.value.resetFields()
  form.value = {
    firstPieces: null,
    firsCharge: null,
    continuations: null,
    renew: null,
  }
  areaData.value = []
  itemDesignatedArea.value = {}
}
const confirm = () => {
  if (!areaData.value.length) {
    return ElMessage.error('请选择地区')
  }
  formRef.value.validate((valid) => {
    if (valid) {
      if(isEditFreight.value){
        const index = designatedArea.value.findIndex(item => item.destination === itemDesignatedArea.value.destination)
        designatedArea.value[index] = {
          ...form.value,
          destination: areaData.value.map(item => item.area_name).join('，'),
        }
      }else{
        designatedArea.value.push({
          ...form.value,
          destination: areaData.value.map(item => item.area_name).join('，'),
        })
      }
      handleClose()
    } else {
      return false
    }
  })
}
</script>

<style lang="less" scoped>
.w160 {
  width: 160px;
}
</style>